﻿@{
    Layout = null;


    List<Product> proList = ViewBag.ProductList as List<Product>;

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <title>.NET Core-ES仿京东实战</title>
    <link href="~/css/style.css" rel="stylesheet" />
    <script src="~/js/jquery.min.js"></script>

</head>

<body class="pg">
    <div class="page">
        <div id="mallPage" class=" mallist tmall- page-not-market ">

            <!-- 头部搜索 -->
            <div id="header" class=" header-list-app">
                <div class="headerLayout">
                    <div class="headerCon ">
                        <!-- Logo-->
                        <h1 id="mallLogo">
                            <img th:src="~/images/jdlogo.png" alt="">
                        </h1>

                        <div class="header-extra">

                            <!--搜索-->
                            <div id="mallSearch" class="mall-search">
                                <form name="searchTop" class="mallSearch-form clearfix" method="get" action="/Home/Index" >
                                    <fieldset>
                                        <legend>搜索</legend>
                                        <div class="mallSearch-input clearfix">
                                            <div class="s-combobox" id="s-combobox-685">
                                                <div class="s-combobox-input-wrap">
                                                    <input type="text" autocomplete="off" id="mq" value="@ViewBag.KeyWord" name="keyword"
                                                           class="s-combobox-input" aria-haspopup="true">
                                                </div>
                                            </div>
                                            <button type="submit" id="searchbtn">搜索</button>
                                        </div>
                                    </fieldset>
                                </form>
                                <ul class="relKeyTop">
                                    <li><a>联想</a></li>
                                    <li><a>惠普</a></li>
                                    <li><a>京峰</a></li>
                                    <li><a>小米</a></li>
                                    <li><a>苹果</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品详情页面 -->
            <div id="content">
                <div class="main">
                    <!-- 品牌分类 -->
                    <form class="navAttrsForm">
                        <div class="attrs j_NavAttrs" style="display:block">
                            <div class="brandAttr j_nav_brand">
                                <div class="j_Brand attr">
                                    <div class="attrKey">
                                        品牌
                                    </div>
                                    <div class="attrValues">
                                        <ul class="av-collapse row-2">
                                            <li><a href="#"> 电脑 </a></li>
                                            <li><a href="#"> PC </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                    <!-- 排序规则 -->
                    <div class="filter clearfix">
                        <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a>
                        <a class="fSort">人气<i class="f-ico-arrow-d"></i></a>
                        <a class="fSort">新品<i class="f-ico-arrow-d"></i></a>
                        <a class="fSort">销量<i class="f-ico-arrow-d"></i></a>
                        <a class="fSort">价格<i class="f-ico-triangle-mt"></i><i class="f-ico-triangle-mb"></i></a>
                    </div>

                    <!-- 商品详情 -->
                    <div class="view grid-nosku">

                        @foreach (var item in proList)
                        {

                            <div class="product" style="cursor:pointer;border: 0;" >
                                <div class="product-iWrap">
                                    <!--商品封面-->
                                    <div class="productImg-wrap">
                                        <a class="productImg">
                                            <img src="@item.Img">
                                        </a>
                                    </div>
                                    <!--价格-->
                                    <p class="productPrice">
                                        <em><b>¥</b>@item.Price</em>
                                    </p>
                                    <!--标题-->
                                    <p class="productTitle">
                                        <a> @Html.Raw(item.ProductName) </a>
                                    </p>
                                    <!-- 店铺名 -->
                                    <div class="productShop">
                                        <span>店铺：@Html.Raw(@item.ShopName) </span>
                                    </div>
                                    <!-- 成交信息 -->
                                    <p class="productStatus">
                                        <span>成交量<em>@(item.Sales)笔</em></span>
                                        <span>评价 <a>@item.Evaluate</a></span>
                                    </p>
                                </div>
                            </div>

                        }

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

    </script>

</body>
</html>